<html>
<head>
    <title>EJS HTML <%=title%> INDEX</title>
</head>

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="/javascripts/angularjs/controller/myController.js"></script>
<script src="/javascripts/angularjs/controller/brandController.js"></script>
<script src="/javascripts/angularjs/controller/rootScopeController.js"></script>
<script src="/javascripts/angularjs/controller/serviceController.js"></script>
<script src="/javascripts/angularjs/controller/httpController.js"></script>
<script src="/javascripts/angularjs/controller/timeoutController.js"></script>
<script src="/javascripts/angularjs/controller/intervalController.js"></script>
<script src="/javascripts/angularjs/controller/custServiceController.js"></script>
<script src="/javascripts/angularjs/controller/selectController.js"></script>

<link href="/stylesheets/style.css" rel="stylesheet" type="text/css" />
<body>
<h1><%=title%></h1>
<p>Welcome to <%=title%></p>

<div ng-app="myApp" ng-controller="myController">
    <h2>Welcome {{name}}</h2>
    <p>名字 : <input type="text" ng-model="name"></p>
    <h2>{{greeting}}</h2>
    <button ng-click="sayHello()">sayHello</button>

    <h2 ng-init="quantity=0;price=0">价格计算器</h2>
    数量： <input type="number" ng-model="quantity">
    价格： <input type="number" ng-model="price">
    <p><b>总价：</b> {{ quantity * price | currency }}</p>

    <!-- 也可以用ng-init初始化值-->
    <!--<h2 ng-init="names=[-->
    <!--{name:'Jani',country:'Norway'},-->
    <!--{name:'Hege',country:'Sweden'},-->
    <!--{name:'Kai',country:'Denmark'}]">循环对象：</h2>-->
    <h2>循环对象-汽车品牌</h2>
    <ul ng-controller="brandController">
        <li ng-repeat="brand in brands | orderBy:'name'">
            {{ (brand.name | uppercase) + ', ' + brand.country }}
        </li>
    </ul>

    <!-- ng-controller="rootScopeController"声明加在h1上为什么不行 -->
    <h1>姓氏为 <i><u>{{lastname}}</u></i> 家族成员:</h1>
    <ul ng-controller="rootScopeController">
        <li ng-repeat="x in firstnames | orderBy:x">{{x}} <i><u>{{lastname | lowercase}}</u></i></li>
    </ul>

    <form name="myForm" ng-init="text = 'test@runoob.com'">
        Email:
        <input type="email" name="myAddress" ng-model="text">
        <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
        <h3>状态</h3>
        <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
        <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
        <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
    </form>


    <div ng-controller="brandController">
        <p><h2>filter <input type="text" ng-model="query"></h2></p>
        <ul>
            <li ng-repeat="x in brands | filter:query | orderBy:'country'">
                {{ (x.name | uppercase) + ', ' + x.country }}
            </li>
        </ul>
    </div>

    <div ng-controller="serviceController">
        使用$location 获取当前页面url{{myUrl}}
    </div>

    <div ng-controller="httpController">
        使用$http发送请求{{resp}}
    </div>

    <div ng-controller="timeoutController">
        <h2>{{timeout}}</h2>
    </div>

    <div ng-controller="intervalController">
        <h2>{{theTime}}</h2>
        <h2>{{theTime2}}</h2>
    </div>

    <div ng-controller="custServiceController" ng-init="x=255">
        <h2>转换16进制service</h2>
        <input type="number" ng-model="x">的16进制是{{hex}}
    </div>

    <div ng-controller="selectController">
        <h2>下拉框</h2>
        <label><b>select</b></label>
        <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
        </select>
        <label><b>repeat</b></label>
        <select>
            <option ng-repeat="x in names">{{x}}</option>
        </select>
        <select ng-model="selectedSite">
            <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
        </select>
        <select ng-model="selectedSite" ng-options="x.site for x in sites">
        </select>

        <h1>你选择的是: {{selectedSite.site}}</h1>
        <p>网址为: {{selectedSite.url}}</p>
        <h1>你选择的是: {{selectedSite}}</h1>

    </div>




</div>





</body>

</html>